<!-- 积分余额 -->
<template>
	<view class="page_box">
		<view class="head_box">
			<image class="bg" :src="$IMG_URL + '/imgs/user/integral_bg.png'" mode=""></image>
			<view class="all-box x-c">
				<text class="all-num">{{ score }}</text>
				<text class="all-title">当前茶多酚</text>
			</view>
			<view @click="jump('/pages/user/rules/rules',{type:'rich',richText:rule})"
				class="mt10 df-c rule white fs26 bs pr20 df">
				<text class="mr10">规则说明</text>
				<image style="width: 26rpx;" :src="IMG_URL_TEMP+'/wh.png'" mode="widthFix"></image>
			</view>
			<view class="tab-box x-f">
				<view class="tab-item y-f " @tap="onTab('all')"><text class="tab-name"
						:class="{ 'tab-active': tabDot === 'all' }">茶多酚明细</text></view>
				<view class="tab-item y-f " @tap="onTab('add')"><text class="tab-name"
						:class="{ 'tab-active': tabDot === 'add' }">茶多酚商城</text></view>
				<view class="tab-item y-f " @tap="onTab('reduce')"><text class="tab-name"
						:class="{ 'tab-active': tabDot === 'reduce' }">兑换记录</text></view>
			</view>
		</view>
		<view class="content_box">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
				<view class="df-c mt30" v-if="noData" style="color: #cccccc;">
					<view class="df-c">
						<u-line length="50" color="#cccccc"></u-line>
						<text class="mx10">暂无相关数据</text>
						<u-line length="50" color="#cccccc"></u-line>
					</view>
				</view>
				<view class="wh100" v-if="tabDot=='reduce'">
					<view class="item-box x-bc" v-for="log in scoreLog" :key="log.id">
						<view class="y-start">
							<view class="name">{{ log.type_name }}</view>
							<view class="time">{{ timestamp(log.createtime) }}</view>
						</view>
						<view class="num" v-if="log.wallet >= 0">{{ log.wallet }}</view>
						<view class="num" v-else>{{ log.wallet }}</view>
					</view>
					<!-- 更多 -->
					<u-loadmore v-if="scoreLog.length" height="80rpx" :status="loadStatus" icon-type="flower"
						color="#ccc" />
				</view>
				<view class="wh100" v-if="tabDot=='all'">
					<view class="item-box x-bc" v-for="log in scoreLog" :key="log.id">
						<view class="y-start">
							<view class="name">{{ log.memo }}</view>
							<view class="time">{{ log.createtime}}</view>
						</view>
						<view class="num">{{ log.score }}</view>
					</view>
					<!-- 更多 -->
					<u-loadmore v-if="scoreLog.length" height="80rpx" :status="loadStatus" icon-type="flower"
						color="#ccc" />
				</view>
				<scoreShop :scoreList="scoreList" v-if="tabDot=='add'"></scoreShop>
			</scroll-view>
		</view>
		<view class="foot_box"></view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	import scoreShop from './components/score-shop.vue'
	export default {
		components: {
			scoreShop
		},
		data() {
			return {
				tabDot: 'all',
				scoreList: [],
				scoreLog: [],
				timestamp: this.$tools.timestamp,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				IMG_URL_TEMP: this.$IMG_URL_TEMP,
				noData: false,
				rule: ""
			};
		},
		computed: {
			...mapState({
				score: state => state.user.userInfo.score
			})
		},
		onLoad() {
			this.getScoreLog();
			this.getScoreRule()
		},
		methods: {
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			},
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getScoreLog();
				}
			},
			onTab(type) {
				this.tabDot = type;
				this.scoreLog = [];
				this.scoreList = [];
				this.currentPage = 1;
				this.noData = false;
				if (type == 'add') {
					this.$u.debounce(this.getScoreShopsList);
					return
				}else if(type=='reduce'){
					this.$u.debounce(this.exchangeLog);
					return
				}else{
					this.$u.debounce(this.getScoreLog);
				}
				
			},
			// 积分明细
			getScoreLog(type) {
				let that = this;
				that.loadStatus = 'loading';
				that.$api('score.log', {
					page: that.currentPage
				}).then(res => {
					if (res.code === 1) {
						that.scoreLog = [...that.scoreLog, ...res.data.data];
						if (that.scoreLog.length == 0) {
							that.noData = true
						}
						that.lastPage = res.data.last_page;
						if (that.currentPage < res.data.last_page) {
							that.loadStatus = 'loadmore';
						} else {
							that.loadStatus = 'nomore';
						}
					}
				});
			},
			//兑换记录
			exchangeLog(){
				let that = this;
				that.loadStatus = 'loading';
				that.$api('user_wallet_log', {
					wallet_type:'score',
					status:"reduce",
					page: that.currentPage
				}).then(res => {
					if (res.code === 1) {
						that.scoreLog = [...that.scoreLog, ...res.data.data];
						if (that.scoreLog.length == 0) {
							that.noData = true
						}
						that.lastPage = res.data.last_page;
						if (that.currentPage < res.data.last_page) {
							that.loadStatus = 'loadmore';
						} else {
							that.loadStatus = 'nomore';
						}
					}
				});
			},
			// 积分商城
			getScoreShopsList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$api('score.list', {
					page: that.currentPage
				}).then(res => {
					if (res.code == 1) {
						that.scoreList = [...that.scoreList, ...res.data.data];
						if (that.scoreList.length == 0) {
							this.noData = true
						}
						that.lastPage = res.data.last_page;
						if (that.currentPage < res.data.last_page) {
							that.loadStatus = 'loadmore';
						} else {
							that.loadStatus = 'nomore';
						}
					}
				});
			},
			//积分规则
			getScoreRule() {
				const that = this
				this.$api('score.rule').then(res => {
					console.log(res)
					that.rule = res.data
				})
			}
		}
	};
</script>

<style lang="scss">
	.scroll-box {
		flex: 1;
		height: 100%;
		padding: 0 30rpx;
	}

	.page_box {
		background: #fff;

		.head_box {
			width: 750rpx;
			height: 480rpx;
			background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 56.99999999999999%, rgba(255, 255, 255, 1) 100%);
			position: relative;

			.bg {
				position: absolute;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%);
				width: 310rpx;
				height: 310rpx;
			}

			.all-box {
				position: absolute;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%);
				width: 180rpx;
				height: 180rpx;

				.all-num {
					font-size: 50rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #a8700d;
					margin-bottom: 20rpx;
				}

				.all-title {
					position: absolute;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(168, 112, 13, 1);
					line-height: 54rpx;
					text-align: center;
					width: 154rpx;
					height: 53rpx;
					background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
					border-radius: 27rpx;
					bottom: -16rpx;
				}
			}

			.rule {
				justify-content: flex-end;
			}

			.tab-box {
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 710rpx;
				height: 90rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 30rpx 30rpx 0px 0px;
				border-bottom: 1rpx solid #e8e8e8;
				padding: 0 40rpx;

				.tab-item {
					flex: 1;

					.tab-name {
						font-size: 30rpx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						border-bottom: 4rpx solid transparent;
						line-height: 86rpx;
					}
					.tab-active {
						border-bottom: 4rpx solid rgba(213, 166, 90, 1);
					}
				}
				.tab-item:first-child{
					align-items: flex-start!important;
				}
				.tab-item:last-child{
					align-items: flex-end!important;
				}
			}
		}
	}

	.item-box {
		background: #fff;
		min-height: 150rpx;
		border-bottom: 1rpx solid #dfdfdf;
		padding: 30rpx;

		.name {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 28rpx;
			margin-bottom: 20rpx;
		}

		.time {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(196, 196, 196, 1);
			line-height: 24px;
		}

		.num {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #e6b873;
		}
	}
</style>
